<template>
    <div class="message">
        <mt-header fixed title="消息通知" id="header1"></mt-header>
        <div class="back" @click="backPage">
            <img src="../../public/image/back.png" alt="" />
        </div>
        <div class="messageContent">
             <!-- navbar -->
            <mt-navbar class="tab" v-model="checked">
                <mt-tab-item id="waitFor">待办</mt-tab-item>
                <mt-tab-item id="allMessage">通知:全部消息</mt-tab-item>
            </mt-navbar>
            <mt-tab-container  v-model="checked">
               
                <mt-tab-container-item id="allMessage" style="display:block;" class="scrollContent">
                    <div class="msg" v-for="(item,index) in info" :key="index">
                        <!-- 发表时间 -->
                        <p class="time">{{format(item.createTime)}}</p>
                        <div class="msgs clearfix">
                            <div class="touxiang">
                                <img src="../../public/image/back1.png" alt="">
                            </div>
                            <div class="msgsContent">
                                <p class="title">{{item.title}}</p>
                                <div class="title_c">{{item.content}}</div>
                                <div class="title_n">通知对象：{{item.user_id}}</div>
                                <div class="title_n">是否公开：{{item.isPublic}}</div>
                            </div>
                        </div> 
                    </div>
                </mt-tab-container-item>
                 <mt-tab-container-item id="waitFor" style="display:block;">
                     <div class="info">暂无待办通知~</div>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
        <div class="input_txt">
            <el-button type="primary" @click="addInformation">发布公告</el-button>
        </div>
        <!-- 点击添加公告，弹出框 -->
        <el-dialog title="新增通知公告" :visible.sync="dialogFormVisible2">
            <el-form :model="information">
            <el-form-item label="人员" :label-width="formLabelWidth">
                <el-select v-model="infoSelect" placeholder="请选择" multiple @change="getPersonName" style="width:100%">
                    <!-- 多选，选中的结果是一个数组 -->
                    <el-option v-for="(item,index) in information.persons" :key="index" :label="item" :value="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="标题" :label-width="formLabelWidth">
                <el-input v-model="information.title" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="公开" :label-width="formLabelWidth">
                <el-radio v-model="information.isPublic" label="yes" @change="getYes">是</el-radio>
                <el-radio v-model="information.isPublic" label="no"  @change="getYes">否</el-radio>
            </el-form-item>
            <el-form-item label="内容" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="information.content" :rows="4"></el-input>
            </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
            <el-button type="primary" plain @click="saveInformation">保存</el-button>
            <el-button type="primary" plain @click="dialogFormVisible2 = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import api from '../utils/api';
var loginName = localStorage.getItem("_loginName");
export default {
    data(){
        return{
            checked:'allMessage',
            time:"",
            info:[],//消息通知
            pages:1,
             //发表公告
            information:{
                persons:[],//人员
                title:'',//标题
                isPublic:'yes',//是否公开
                content:''//内容
            },
            infoSelect:'',
            person:"",
            yesOrNo:'yes',
            formLabelWidth: '60px',
            dialogFormVisible2:false
        }
    },
    mounted() {
        //消息通知
        this.getInfo();
    },
    methods:{
        //返回上一页
        backPage(){
            this.$parent.$router.go(-1);
        },
        //时间格式
        format:function(time){
            var t = new Date(time);
            var year = t.getFullYear();
            var month = (t.getMonth()+1);
            var day = t.getDate();
            var hour = t.getHours();
            var minute = t.getMinutes();
            var second = t.getSeconds();
            if(month<10){
                month = "0"+month;
            }
            if(day<10){
                day = "0"+day;
            }
            if(hour<10){
                hour = "0"+hour;
            }
            if(minute<10){
                minute = "0"+minute;
            }
            if(second<10){
                second = "0"+second;
            }
            if(hour =="00" && minute == "00" && second == "00"){
                return t = year+"-"+month+"-"+day;
            }else{
                return t = year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
            }   
        },
        //消息通知
        getInfo:async function(){
            let data={
                params:"loginname="+loginName+"&page="+this.pages+"&rows="+10
            }
            const res = await this.$axios._post(api.getInfo, data);
            if (res.data.success) {
                this.info = res.data.data;
            }
        },
        //添加公告
        //点击添加公告
        addInformation(){
            this.dialogFormVisible2 = true;
            this.getPerson();
        },
        //获取人员数据
        getPerson:async function(){
            let data={params:""};
            const res = await this.$axios._post(api.getPersonAll,data);
            if(res.data.success){
                this.information.persons = res.data.data;
            }
        },
        //保存公告
        saveInformation:async function(){
            this.dialogFormVisible2 = false;
            var person = this.person || '';
            let data = {
                params:"user_id="+person+"&title="+this.information.title+"&content="+this.information.content+"&isPublic="+this.yesOrNo
            }
            const res = await this.$axios._post(api.addNotice,data);
            if(res.data.success){
                this.$message({
                message: '成功发布公告',
                type: 'success'
                });
                this.getInfo();
            }
        },
        //选中人员
        getPersonName(e){
            this.person = e.join(",");
        },
        getYes(e){
            this.yesOrNo = e;
        },
    }
}
</script>
<style scoped lang="scss">
    .info{
        margin-top:20px;
    }
     .message{
        width:100vw;
        position:relative;
        overflow: hidden;
        background-color:#fff;
        .back{
            position:fixed;
            left:0;
            top:0;
            width:10vw;
            height:40px;
            z-index:6;
            img{
                margin-top:4px;
                display:block;
            }
        }
        .messageContent{
            width:100vw;
            overflow: hidden;
            margin-top:2.5rem;
        }
        .messageContent{
            .scrollContent{
                width:100%;
               
           
            .msg{
                margin-top:40px;
                .time{
                    width:60vw;
                    height:20px;
                    line-height:20px;
                    margin:auto;
                    background-color:azure;
                }
            }
            .msgs{
                width:85vw;
                margin:20px auto 10px;
                .touxiang{
                    width:10vw;
                    height:10vw;
                    border-radius: 50%;
                    float:left;
                    background-color:#1b3464;
                    img{
                        display: block;
                        margin:4px auto 0;
                        
                    }
                }
                .msgsContent{
                    width:65vw;
                    float:left;
                    margin-left:5vw;
                    text-align: left;
                    background-color:#f3f3f3;
                    padding:5px;
                    .title{
                        line-height:30px;
                        color:brown;
                    }
                    .title_c{
                        line-height:20px;
                        font-size:0.8rem;
                        padding:10px 5px;
                    }
                    .title_n{
                        line-height:20px;
                        font-size:0.7rem;
                    }
                }
            }
            }
        }
        .input_txt{
            width:100vw;
            height:50px;
            position:fixed;
            bottom:0;
            left:0;
            background-color:#1b3464;
            .el-button{
                margin:10px 0 0 10px;
            }
        }
    }
</style>


